<template>
	<view class="page" :style="{'height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="港口地址"></c-nav-bar>
		<view class="base_body" :style="{'height':(h-144-mt)+'px'}">
			<map id="gk_map" style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude"
				:markers="covers">
				<cover-view slot="callout">
					<block v-for="(item,index) in covers" :key="index">
						<cover-view class="customCallout" :marker-id="item.id">
							<cover-view class="content">
								<cover-view class="c_title">{{item.title}}</cover-view>
								<cover-view class="c_address">{{item.address}}</cover-view>
							</cover-view>
						</cover-view>
					</block>
				</cover-view>
			</map>
		</view>
		<view class="gk">
			<view :class="index===0?'active':''" @tap="changeAddr(0)">
				<image src="https://i.ringzle.com/file/20240220/409f61c9dcfe47a08bede3ff5ac8d3a1.png" v-if="index===0">
				</image>
				<text>出发港口</text>
			</view>
			<view :class="index===1?'active':''" @tap="changeAddr(1)">
				<image src="https://i.ringzle.com/file/20240220/409f61c9dcfe47a08bede3ff5ac8d3a1.png" v-if="index===1">
				</image>
				<text>到达港口</text>
			</view>
		</view>
		<view class="bottom">
			<view class="b_title">{{title}}</view>
			<view class="b_item">地址:{{address}}</view>
			<view class="b_item">电话:{{phone}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'portAddress',
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				departPort: '',
				arrivePort: '',
				index: 0,
				title: '',
				address: '',
				phone: '',
				latitude: '',
				longitude: '',
				covers: []
			}
		},
		onLoad(option) {
			if (option.departPort) this.departPort = JSON.parse(option.departPort);
			if (option.arrivePort) this.arrivePort = JSON.parse(option.arrivePort);
			this.getLocationInfo(this.departPort);
		},
		methods: {
			changeAddr(index) {
				this.index = index;
				this.getLocationInfo(index === 0 ? this.departPort : this.arrivePort);
			},
			getLocationInfo(data) {
				if(!data){
					this.title = '';
					this.phone = '';
					this.address = '';
					this.latitude = '';
					this.longitude = '';
					this.covers = [];
					return this.$showToast('暂无港口地址信息');	
				} 
				
				this.title = data.title;
				this.phone = data.telphone || '暂无';
				this.address = data.address || '暂无';
				this.latitude = data.lat;
				this.longitude = data.lng;
				this.covers.push({
					id: new Date().getTime(),
					title: data.title,
					address: data.address || '暂无',
					customCallout: {
						anchorY: 0,
						anchorX: 0,
						display: "ALWAYS"
					},
					latitude: data.lat,
					longitude: data.lng,
					iconPath: 'https://fsy.shengsi.gov.cn/file/20240906/f69da85565434e51849827d256efcadd.png',
					width: 20,
					height: 30
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		padding-bottom: 287rpx;
		box-sizing: border-box;

		.gk {
			width: 320rpx;
			height: 86rpx;
			background: #FFFFFF;
			border-radius: 43rpx;
			position: fixed;
			bottom: 327rpx;
			left: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;

			&>view {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
					margin-left: 10rpx;
				}

				image {
					width: 10rpx;
					height: 21rpx;
				}

				&.active {
					text {
						color: #007A69;
					}
				}
			}
		}

		.bottom {
			width: calc(100% - 56rpx);
			height: 287rpx;
			background: #FFFFFF;
			padding: 0 28rpx;
			position: fixed;
			bottom: 0;

			.b_title {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				margin-top: 40rpx;
			}

			.b_item {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 20rpx;
			}
		}
	}
</style>
<style>
	.base_body {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	/* 水平，垂直居中 */
	.base_all_center {
		justify-content: center;
		align-items: center;
	}

	/* 垂直居中 */
	.base_center_vertical {
		display: flex;
		align-items: center;
	}

	/* 水平居中 */
	.base_center_horizontal {
		display: flex;
		justify-content: center;
	}

	/* 垂直布局 */
	.base_column {
		display: flex;
		flex-direction: column;
	}

	/* 横向布局 */
	.base_row {
		display: flex;
		flex-direction: row;
	}

	/* 基础dialog */
	.base_dialog {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		background: rgba(0, 0, 0, 0.5);
	}

	.customCallout {
		width: 534rpx;
		min-height: 140rpx;
		background-image: url(https://i.ringzle.com/file/20231030/aa5fd052999e45b7a73de046c2172d51.png);
		background-size: 100% 100%;
	}

	.c_title {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #111111;
		padding: 14rpx 20rpx;
	}

	.c_address {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		padding: 0 20rpx 14rpx;
	}
</style>